<!--{template pc/frame/header_simple_start}-->
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/css/pc/index.css?{VERHASH}"/>
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/css/pc/screen.css?{VERHASH}"/>
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/css/pc/image.css?{VERHASH}"/>
<script type="text/javascript" src="{MOD_PATH}/js/pc/plug/wavesurfer.js?{VERHASH}"></script>
<script type="text/javascript" src="{MOD_PATH}/js/pc/plug/DomResize.js?{VERHASH}"></script>
<style type="text/css">
	.el-header{
		border-bottom: 0;
		background: var(--bg-header);
	}
	#leftResize {
	    border-right-width: 1px;
	    border-right-style: solid;
	    position: absolute;
	    right: 0;
	    top: 0;
	    width: 3px;
	    height: 100%;
	    cursor: w-resize;
	    z-index: 1000;
		border-color: transparent;
	}
	.el-aside{
		position: relative;
		background: var(--bg-header);
	}
</style>
<!--{template pc/frame/header_simple_end}-->
<div id="dzzoffice">
	<el-container class="container2">
		<el-header height="auto" style="z-index: 100;">
			<div class="header-wrapper">
				<!--{template pc/components/index/JsHeader2}-->
			</div>
		</el-header>
		<el-container>
			<el-aside style="overflow: hidden;" :style="{display:DocumentLeftShow,width:DocumentLeftWidth+'px'}">
				<!--{template pc/components/index/template2/JsLeft}-->
				<div id="leftResize" class="color-border"></div>
			</el-aside>
			<el-main>
				<el-container>
					<el-header style="height: auto;background: var(--bg-content);border: 0px;">
						<div style="padding: 0px 8px;" v-if="ScreenData.length&&Screenshow">
							<!--{template pc/components/index/JsScreen}-->
						</div>
					</el-header>
					<el-main style="padding: 8px 0;overflow: hidden;">
						<el-scrollbar id="container_scroll" v-loading="ImageParams.loading">
							<div class="page-content">
								<!--{template pc/components/index/Jsimage}-->
								<el-backtop target="#container_scroll>.el-scrollbar__wrap"></el-backtop>
							</div>
						</el-scrollbar>
					</el-main>
				</el-container>
				
			</el-main>
		</el-container>
	</el-container>
	<div id="Details_Iframe" v-if="DetailsIframe">
		<iframe id="iframesrc" :src="DetailsIframe" width="100%" height="100%" style="border: 0;"></iframe>
	</div>
</div>
<!--{template pc/components/index/JsCommon}-->
<script type="text/javascript">
	var pvue = new Vue({
		el: '#dzzoffice',
		data: function() {
			return $.extend({},JsCommonData,JsLeftData,JsHeaderData,JsScreenData,JsImageData,{
				DocumentResize:0,
				DocumentTemplate:2,
				DocumentLeftWidth:260,
				DocumentLeftShow:'block',
				OpenDetailType:'new',
				DetailsIframe :''
			});
		},
		watch:Object.assign({},JsImageWatch,{
			DocumentResize:debounce(function(val){
				var self = this;
				self.$nextTick(function(){
					if(!self.ImageParams.loading){
						self.ImageParams.scroll = false;
						self.ImageInit();
					}
				});
			},500),
			'HeaderRightBtnScreen.active':{
				handler(){
					var self = this;
					self.$nextTick(function(){
						self.LayoutStructure();
					});
				},
				deep:true
			},
			DocumentLeftShow:{
				handler(){
					var self = this;
					self.$nextTick(function(){
						if(!self.ImageParams.loading){
							self.ImageParams.scroll = false;
							self.ImageInit();
						}
					});
				},
				deep:true
			},
			'HeaderRightBtnDisplay.value':{
				handler(){
					var self = this;
					self.$nextTick(function(){
						if(!self.ImageParams.loading){
							self.ImageParams.scroll = false;
							self.ImageInit();
						}
					});
				},
				deep:true
			},
		}),
		computed:{

		},
		created() {
			var self = this;
			this.LeftCreat();
			this.HeaderCenterCreate();
			this.HeaderRightBtnCreate();
			this.ScreenCreate();
			this.ImageCreate();
			var pagesetting = $pagesetting;
			<!--{if $_G[uid]}-->
			if(pagesetting && pagesetting.opentype){
				this.OpenDetailType = pagesetting.opentype;
			}
			<!--{/if}-->
		},
		methods: Object.assign({},JsImageMethods,JsCommonMethods,JsLeftMethods,JsHeaderMethods,JsScreenMethods,{
			DocumentLeftShowClick(){
				this.DocumentLeftShow = this.DocumentLeftShow=='block'?'none':'block';
			},
			LayoutStructure(){
				// var padding = $('.header-wrapper').height();
				// $('.page-content').css({
				// 	'padding-top':padding+'px'
				// });
			},
			leftDrager(){
				var self = this;
				var resize = document.querySelector("#leftResize");
				// var aside = document.querySelector(".el-aside");
				resize.onmousedown = function(e) {
				    document.onmousemove = function(e) {
						var DocumentLeftWidth = e.clientX+1;
						if(DocumentLeftWidth<260){
							DocumentLeftWidth = 260;
						}
						self.DocumentLeftWidth = DocumentLeftWidth;
				    };
				    document.onmouseup = function() {
						document.onmousemove = null;
						document.onmouseup = null;
						self.ImageParams.scroll = false;
						self.ImageInit();
				    };
				    return false;
				  };
			}
		}),
		mounted() {
			var self = this;
			this.HeaderPopoverSearchMounted();
			this.ImageMounted();
			$(document).resize(function(){
				self.ScreenResize();
				self.LayoutStructure();
				self.DocumentResize += 1;
			});
			self.$nextTick(function(){
				self.leftDrager();
				$('#container_scroll .el-scrollbar__wrap').scroll(function(){
					var scrollTop = this.scrollTop;
					if(scrollTop+$(this).height()>=this.scrollHeight-80){
						if(self.ImageParams.page>=self.ImageParams.totalpage || self.ImageParams.loading || self.ImageParams.ValLoading){
							return false;
						}
						self.CommonGetImageData('scroll');
					}else{
						self.ImageLayoutScrollShow()
					}
				})			});
			$(document).on('click','.copy-share-btn',function(){
				var txt = $(this).parent().siblings('.address').text()
				CopyTxt(self,txt);
			});
		},

	})
</script>

<!--{template pc/frame/footer_simple}-->
